<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="_fragments :: head('注册')"></head>

<body class="background show-spinner no-footer">

    <div class="fixed-background"></div>

    <main>
        <div class="container">
            <div class="row h-100">
                <div class="col-12 col-md-10 mx-auto my-auto">
                    <div class="card auth-card">
                        <div class="position-relative image-side ">
                            <p class=" text-white h2">欢迎使用SGL BLOG</p>
                            <p class="white mb-0">
                                请填写信息进行注册。
                                <br>如果你已有账号, 请
                                <a th:href="@{/user/login}" class="white">登录</a>.
                            </p>
                        </div>
                        <div class="form-side">
                            <a th:href="@{/}">
                                <span class="logo-single"></span>
                            </a>

                            <form id="formReg" th:action="@{/user/register}" onsubmit="return checkCode()" method="post" class="needs-validation tooltip-right-top" novalidate>
                                <div class="form-group position-relative error-l-50">
                                    <label>邮箱</label>
                                    <input id="email" type="email" name="accountEmail" class="form-control" required>
                                    <div class="invalid-tooltip">
                                        请输入邮箱！
                                    </div>
                                </div>

                                <label>验证码</label>
                                <div class="form-group position-relative error-l-50 input-group">
                                    <input id="code" type="text" name="code" class="form-control" required>
                                    <div class="invalid-tooltip">
                                        请输入验证码！
                                    </div>
                                    <div class="input-group-append">
                                        <button id="sendCodeBtn" class="btn btn-outline-secondary next-btn" type="button">发送</button>
                                    </div>
                                </div>
                                <div class="form-group position-relative error-l-50">
                                    <label>密码</label>
                                    <input type="password" name="accountPassword" class="form-control" required>
                                    <div class="invalid-tooltip">
                                        请输入密码！
                                    </div>
                                </div>
                                <div class="d-flex justify-content-end align-items-center">
                                    <button class="btn btn-primary btn-lg btn-shadow" type="submit">注册</button>
                                </div>

                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <th:block th:replace="_fragments :: script" />
</body>

</html>